<template>
  <div>
    <div class="table-header">
      <el-button type="primary" :icon="Plus" @click="ShowAddDialog">添加</el-button>
    </div>
    <el-table :data="DataDictionaries" stripe border v-loading="isLoading">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="value" label="值"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template v-slot:default="scope">
          <el-button type="primary" :icon="Edit" @click="ShowUpdateDialog(scope.row)">编辑</el-button>
          <el-button type="danger" :icon="Delete" @click="DeleteDataDictionary(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination-container">
      <Pagination layout="prev, pager, next" :total="PaginationConfig.total" :limit="PaginationConfig.pageSize"
                  :page="PaginationConfig.pageNum" @pagination="UpdatePage"></Pagination>
    </div>
    <DataDictionaryDialog autofocus :IsAddType="DataDictionaryDialogConfig.IsAddType"
                          :visible="DataDictionaryDialogConfig.visible"
                          @DialogVisibleListener="DialogVisibleListener"
                          @CancelFormDialog="CancelFormDialog"
                          @UpdateDataEvent="UpdateDataEvent"
                          :Model="DataDictionaryDialogConfig.Data">

    </DataDictionaryDialog>
  </div>
</template>

<script setup>
import {getCurrentInstance} from 'vue'
import {GetAllDisctionary, DeleteDictionary} from "@/api/DataDictionary";
import {onMounted, reactive, ref} from "vue";
import DataDictionaryDialog from './modules/DataDictionaryDialog.vue';
import Pagination from '@/components/Pagination/index.vue';
import {Edit, Delete, Plus} from "@element-plus/icons-vue"
import {CopyObjectValue, SetObjectPropertyNormal} from "@/utils/ObjectPropertyHelper";
import {ElMessage, ElMessageBox} from 'element-plus'

const {appContext} = getCurrentInstance();
const PaginationConfig = reactive({
  pageNum: 1,
  pageSize: 5,
  total: 0
})
const isLoading = ref(true)
const DataDictionaries = ref([]);
onMounted(() => {
  GetAllDictionaryHandler();
})
const DataDictionaryDialogConfig = reactive({
  visible: false,
  IsAddType: true,
  Data: reactive({
    name: '',
    value: '',
    type: '',
    remark: ''
  })
});

function GetAllDictionaryHandler() {
  GetAllDisctionary(PaginationConfig.pageNum, PaginationConfig.pageSize).then(response => {
    DataDictionaries.value = response.rows;
    PaginationConfig.total = response.total;
    isLoading.value = false;
  })
}


function UpdatePage(args) {
  isLoading.value = true
  PaginationConfig.pageNum = args.page;
  GetAllDictionaryHandler();
}

function ShowAddDialog() {
  SetObjectPropertyNormal(DataDictionaryDialogConfig.Data);
  DataDictionaryDialogConfig.visible = true;
  DataDictionaryDialogConfig.IsAddType = true;
}

function ShowUpdateDialog(row) {
  DataDictionaryDialogConfig.visible = true;
  DataDictionaryDialogConfig.IsAddType = false;
  CopyObjectValue(row, DataDictionaryDialogConfig.Data);
}

function DeleteDataDictionary(id) {
  ElMessageBox.confirm('你确定要删除这条数据吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    DeleteDictionary(id).then(response => {
      if (response.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
          duration: 1000
        })
        DataDictionaries.value.forEach((element, index, array) => {
          if (element.id === id) {
            DataDictionaries.value.splice(index, 1);
          }
        })
      }
    })
  }).catch(()=>{

  });
}

function DialogVisibleListener(visible) {
  DataDictionaryDialogConfig.visible = visible;
}

function CancelFormDialog() {
  DataDictionaryDialogConfig.visible = false;
}

function UpdateDataEvent() {
  GetAllDictionaryHandler();
}
</script>

<style scoped>
.pagination-container {

  display: flex;
  justify-content: center;
  padding: 20px;
}

.table-header {
  padding-bottom: 20px;
  display: flex;
}
</style>